<!-- eslint-disable @typescript-eslint/ban-types -->
<template>
  <div class="pie_chart" id="pie_chart"></div>
</template>

<script lang="ts">
import * as echarts from 'echarts'
import { defineComponent, onMounted } from 'vue'
export default defineComponent({
  props: {
    data: {
      type: Array,
      required: true
    },
    title: {
      type: String,
      required: true
    }
  },
  setup(props) {
    type EChartsOption = echarts.EChartsOption
    let option: EChartsOption  
    option = {}
    var myChart: echarts.ECharts
    const init = () => {
      if(myChart) {
        myChart.dispose()
      }
      option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            name: props.title,
            type: 'pie',
            radius: ['35%', '60%'],
            labelLine: {
              length: 30
            },
            label: {
              formatter: '{b|{b}}  {per|{d}%}  ',
              rich: {}
            },
            // eslint-disable-next-line @typescript-eslint/ban-types
            data: props.data as Array<{}>,
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 4
            }
          },
          {
            name: props.title,
            type: 'pie',
            radius: ['30%', '35%'],
            // eslint-disable-next-line @typescript-eslint/ban-types
            data: props.data as Array<{}>,
            itemStyle: {
              opacity: 0.7,
              borderColor: '#fff',
              borderWidth: 4
            },
            label: {
              show: false
            }
          }
        ]
      };
      myChart = echarts.init(document.getElementById('pie_chart') as HTMLElement)
      option && myChart.setOption(option);
    }
     onMounted(() => {
      init()
    })
    return {
      init
    }
  }
})
</script>

<style scoped>
  .pie_chart {
    height: 100%;
    width: 100%;
  }
</style>